<template>
  <div class="app-container">
    <el-form
      :model="menu"
      :rules="rules"
      ref="ruleForm"
      label-width="200px"
      class="demo-ruleForm"
    >
      <el-form-item label="显示名" prop="name">
        <el-input v-model="menu.nam"></el-input>
      </el-form-item>
      <el-form-item class="myuploader" label="Menu图片" prop="menuImg">
        <el-upload
          ref="uploader"
          class="upload-demo"
          :on-change="handleChange"
          :action="uploadUrl"
          :file-list="fileList"
          :data="menu"
          :on-success="onSuccess"
          :on-error="onError"
          :multiple="false"
          :auto-upload="false"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="链接URL" prop="url">
        <el-input v-model="menu.url"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="menu.remarks"></el-input>
      </el-form-item>
      <el-form-item label="显示排序" prop="orderNum">
        <el-input-number
          v-model="menu.orderNum"
          :min="1"
          :max="999"
          label="排序号"
        ></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addMenuApi } from "@/api/menu";
export default {
  data() {
    return {
      fileList: [],
      uploadUrl: process.env.VUE_APP_BASE_API + "/menu",
      menu: {
        type: 2,
        orderNum: 1
      },
      rules: {
        menuUrl: [
          { required: true, message: "请输入链接URL", trigger: "blur" },
        ],
        orderNum: [
          { required: true, message: "请输入排序号", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    onSuccess() {
      this.$message("提交成功");
      this.$router.push("/content/rightmenu");
    },
    onError() {
      this.$message("上传出错！");
    },
    handleChange(file, fileList) {
      const isPNG = file.raw.type === "image/png";
      const isLt2M = file.raw.size / 1024 / 1024 < 0.5;
      if (fileList.length > 0) {
        //单个覆盖上传
        this.fileList = [fileList[fileList.length - 1]]; // 这一步，是 展示最后一次选择的csv文件
        if (!isPNG) {
          this.$message.error("上传图片只能是 PNG 格式!");
          this.fileList = [];
          return false;
        } else if (!isLt2M) {
          this.$message.error("上传图片大小不能超过 200kb!");
          this.fileList = [];
          return false;
        }
        return true;
      }
    },
    submitForm(formName) {
        if(this.fileList.length ==0){
          this.$message('请选择一张图片上传！')
          return ;
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$refs.uploader.submit()
          } 
        })
      },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped>
    .myuploader >>> .el-list-enter-active,.myuploader >>> .el-list-leave-active{
        transition: none;
    }

    .myuploader >>>.el-list-enter,.myuploader >>> .el-list-leave-active {
      opacity: 0;
    }
</style>